<template>
  <el-dialog
    v-model="upOpen"
    title="上传下载文件"
    width="50%"
    :before-close="cancelHandler"
  >
    <el-form
      ref="forms"
      v-loading="loading"
      :model="form"
      label-width="120px"
    >
      <el-form-item label="文件上传" prop="files" class="uploadBox">
        <el-upload
          ref="uploads"
          v-loading="uploadLoading"
          action="#"
          class="upload-demo"
          multiple
          :limit="1"
          :http-request="uploadFile"
          :auto-upload="autoUpload"
          :on-exceed="handleExceed"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-table
        :data="UploadingData"
        style="width: 100%;"
        max-height="250"
      >
        <el-table-column
          prop="operatorTime"
          label="日期"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="fileName"
          label="名称"
          align="center"
          width="400"
        ></el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              text
              size="small"
              @click="downloadRow(scope.row)"
            >
              下载
            </el-button>
            <el-button
              type="primary"
              text
              size="small"
              @click="delRow(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>;
      </el-table>
      
      <div style="text-align: right;margin-top: 10px;">
        <el-button type="primary" @click="confirmHandler">
          保存
        </el-button>
        <el-button type="warning" @click="cancelHandler">返回</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, defineEmits } from 'vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import { aircabinetFile, deleteFile } from '@/api/expressManager/clearance'

const emit = defineEmits(['refush'])
const upOpen = ref(false)
const loading = ref(false)
const ladingNo = ref(undefined)

const uploadLoading = ref(false)
const form = ref({
  files: '',
})

const { proxy } = getCurrentInstance() as any
let formData = reactive(undefined)
const autoUpload = ref(true)
const forms = ref(undefined)
const UploadingData = ref([])
const downloadRow = (row: { [key: string]: any }) => {
  createDownload(unescape(row.file), row.fileName)
  console.log(row.file)
}
const createDownload = (url, filename) => {
  const a = document.createElement('a')
  a.download = filename
  a.href = url
  a.target = '_blank'
  a.click()
}
const delRow = async (row: { [key: string]: any }) => {
  loading.value = true
  ElMessageBox.confirm('确定删除, 是否继续?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteFile(row.id).then(res => {
      if (res.code == 200) {
        ElMessage.success('删除文件成功！')
      } else {
        ElMessage.error('删除文件失败！')
      }
    })
  })
  
  loading.value = false
}
const confirmHandler = () => {
  const ladingNos = ladingNo.value
  if (formData.get('file')) {
    formData.append('ladingNo', ladingNos)
    return aircabinetFile(formData)
    .then(res => {
      const { code } = res
      if (code === 200) ElMessage.success('上传文件成功！') 
      proxy.$refs.forms.resetFields()
      refush()
    })
    .catch(error => {
      ElMessage.error('上传文件失败！')
      console.log(error)
    })
  }
  cancelHandler()
}
const refush = () => {
  emit('refush')
}
const cancelHandler = () => {
  upOpen.value = false
  proxy.$refs.forms.resetFields()
}

const resetFormData = () => {
  formData = new FormData()
}
resetFormData()
const handleExceed = () => {
  if (formData.get('file')) return ElMessage.error('只能上传一个文件（上传多个文件可以使用.zip格式）')
}
const uploadFile = (file) => {
  formData.append('file', file.file)
}
defineExpose({
  ladingNo,
  upOpen,
  loading,
  UploadingData,
})
</script>